<template>
  <div v-if="detailData.arrange_num" id="car-detail" class="car-detail" :class="{'can-edit': detailData.status != '已完成'}">
    <div class="title-area">
      <p class="title"><span>{{ detailData.arrange_num }}</span><span class="status-text" :class="returnStatus(detailData.status)">{{ detailData.status }}</span></p>
    </div>
    <div class="basic-area">
      <p class="info-title">用车人</p>
      <van-row :gutter="10">
        <van-col span="4">
          <div class="people-with-name">
            <van-image :src="$common.returnImg(detailData.pic)" @click="checkIdCard(detailData.uid)"></van-image>
            <p class="van-ellipsis">{{ detailData.user_car }}</p>
          </div>
        </van-col>
      </van-row>
      <p class="info-title">目的地</p>
      <p class="info van-ellipsis">{{ detailData.destination }}</p>
      <p class="info-title">用车时间</p>
      <p class="info van-ellipsis">{{ $common.convertDate(detailData.arrange_start, 'Y-M-D h:m') }} — {{ $common.convertDate(detailData.arrange_end, 'Y-M-D h:m') }}</p>
      <p class="info-title">行驶里程</p>
      <p class="info van-ellipsis">{{ detailData.ex_km }}</p>
      <p class="info-title">派车说明</p>
      <p class="info">{{ detailData.note }}</p>
      <p class="info-title">同行人员</p>
      <van-row :gutter="11" v-if="detailData.peer && detailData.peer.length > 0">
        <van-col span="4" v-for="(passenger, index) in detailData.peer" :key="`${index}同行人`">
          <div class="people-with-name">
            <van-image :src="$common.returnImg(passenger.pic)" @click="checkIdCard(passenger.id)"></van-image>
            <p class="van-ellipsis">{{ passenger.name }}</p>
          </div>
        </van-col>
      </van-row>
      <p v-else class="info van-ellipsis">暂无人员</p>
    </div>

    <div class="cars-area">
      <div class="car-card" v-for="item in detailData.car_driver">
        <van-image :src="item.car_picture"/>
        <div class="car-info full-size">
          <p class="title van-ellipsis">{{ item.license_num }} {{ item.brand_type }}</p>
          <p class="infos">{{ item.name }} <span class="phone-num"> ({{item.phone}})</span></p>
        </div>
        <div>
          <!-- <van-button type="info" size="small">实时位置</van-button> -->
        </div>
      </div>
    </div>

    <div class="bottom-button" v-if="detailData.status != '已完成'">
      <van-button icon="edit" @click="goToEdit" size="large" type="default">编 辑</van-button>
    </div>
  </div>
</template>

<script type="text/javascript">
  export default {
    data() {
      return {
        detailData: {},
        attachment: []
      }
    },
    activated() {
      this.detailData = {}
      this.getDetailData(null)

      setTimeout(_ => {
        this.$bridge.callHandler('navTitle', {title: '详情'})
        
        // 从原生页进入 则进行强制跳转
        if(this.$route.query.from != 'origin') {
          this.$bridge.callHandler('navBack')
          this.$bridge.registerHandler('navBackClicked', _ => {
            this.$router.push({ name: 'carLog' })
          })
        } else {
          this.$bridge.registerHandler('navBackClicked', (data, callback) => {
            callback('h5done')
          })
        }
      }, 200)
    },
    mounted() {
      
    },
    methods: {
      getDetailData(id) {
        let self = this
        self.$toast({
          duration: 0,
          forbidClick: true,
          className: 'loading-toast',
          icon: require('../../assets/loading.gif'),
        })
        let config = {
          url: `${this.$common.basePath}aatp5/public/index.php/message/api_car/messageDetail`,
          data: {
            id: id || this.$route.query.id,
            uid: this.$store.state.userId
          },
          method: 'POST'
        }
        if(!self.newsFinished) {
          self.detailData = {}
          self.$axios(config).then(res => {
            self.detailData = res.data
            self.detailData.car_driver = res.data.car_driver.map(item => {
              if(item.car_picture && Array.isArray(JSON.parse(item.car_picture)) ) {
                item.car_picture = JSON.parse(item.car_picture)[0]
              }
              return item
            })
            self.$nextTick(_ => {
              self.$toast.clear()
            })
          }).catch(err => {
            self.$nextTick(_ => {
              self.$toast.clear()
            })
          })
        }
      },
      goToEdit() {
        this.$router.push({name: 'carForm', query: {id: this.$route.query.id, type: (this.detailData.status == '进行中' || this.detailData.status == '预约中') ? 'going' : 'cancel'}})
      },
      returnStatus(status) {
        let className = "" 
        switch(status) {
          case '进行中':
            className = 'yellow';
            break;
          case '预约中':
            className =  'blue';
            break;
          case '已取消':
            className =  'red';
            break;
          case '已完成':
            className = 'green';
            break;
          default:
            className = 'blue';
            break;
        }
        return className
      },
      /**
       * 点击头像 查看身份信息
       * @return {[type]} [description]
       */
      checkIdCard(uid) {
        console.log(uid)
        this.$bridge.callHandler('showUserInfo',{userId: uid})
      },
      /**
       * 预览附件
       * @return {[type]} [description]
       */
      // previewFile(item) {
      //   this.$bridge.callHandler('showPreview', {
      //     url: `${this.$common.filePath}${item.address}`,
      //     fileName:  item.name
      //   })
      //   window.open(`${this.$common.filePath}${item.address}?filename=${item.name}`)
      // },
      // goToRead() {
      //   this.$router.push({name: 'hasRead', query: { id: this.$route.query.id , type: this.$route.query.type}})
      // }
    }
  }
</script>

<style lang="less" scoped>
  #car-detail {
    min-height: calc( 100vh - 8px ) ;
    padding-top: 8px;
    & /deep/ img {
      overflow: hidden!important;
      border-radius: 4px!important;
    }
    &.can-edit {
      min-height: calc( 100vh - 78px ) ;
      padding-bottom: 70px;
    }
    background: #f5f5f5;
    .title-area {
      margin: 0;
      background: #fff;
      height: 35px;
      line-height: 24px;
      border-bottom: 1px solid #f5f5f5;
      .title {
        margin: 0;
        padding: 8px 15px;
        color: #666666;
      }
      .status-text {
        font-size: 15px;
        float: right;
        &.blue {
          color: #2E79FF;
        }
        &.green {
          color: #02C70D;
        }
        &.red {
          color: #F54B03;
        }
        &.yellow {
          color: #F5A703;
        }
      }
    }
    .basic-area {
      background: #fff;
      padding: 0 15px 10px 15px;
      .info-title {
        margin: 0;
        padding: 10px 0 5px 0;
        color: #999999;
        font-size: 14px;
      }
      .info {
        margin: 0;
        font-size: 17px;
        color: #333;
      }
      & /deep/ .people-with-name {
        width: 100%;
        margin-bottom: 10px;
        .van-image {
          display: block;
          margin: auto;
          min-width: calc( 100vw / 6 - 18px);
          max-width: 50px;
          min-height: calc( 100vw / 6 - 18px);
          max-height: 50px;
        }
        p {
          padding-top: 4px;
          margin: 0;
          font-size: 12px;
          text-align: center;
        }
      }
    }
    .cars-area {
      background: #fff;
      margin-top: 8px;
      .car-card {
        display: flex;
        justify-content: space-between;
        height: 83px;
        border-bottom: 1px solid #f5f5f5;
        .van-image {
          display: block;
          margin: 15px 10px 0 15px;
          height: 53px;
          width: 70px;
        }
        & > .car-info {
          margin: 0;
          &.full-size {
            width: calc( 100vw - 100px );
            .title {
              width: calc( 100vw - 115px );
            }
          }
          .title {
            margin: 0;
            padding: 15px 0 10px 0;
            width: calc( 100vw - 180px );
            font-size: 17px;
            font-weight: bold;
            color: #333;
          }
          .infos {
            margin: 0;
            font-size: 14px;
            .phone-num {
              color: #2E79FF
            }
          }
        }
        .van-button {
          display: block;
          margin: 24px 15px 24px 0;
        }
      }
    }
    & /deep/ .van-divider {
      // margin: 8px 0;
    }
    .bottom-button {
      position: fixed;
      bottom: 0;
      width: calc( 100vw );
      margin-top: 10px;
      background-color: #fff;
      border-top: 1px solid #f5f5f5;
      & /deep/ .van-button {
        color: #2e79ff;
        border: none;
      }
    }
  }
</style>
